<template>
    <app-layout :haveBackground="false">
        <view class="page">
            <view class="title dir-left-nowrap cross-center" v-if="date">
                <view>每月配送时间</view>
                <image src="./../image/tips.png"></image>
                <view class="week-last">{{date}}</view>
            </view>
            <view class="title"v-else>可选日期（单位：号）</view>
            <view class="days dir-left-wrap" :class="{'show-date': date}">
                <view @click="choose(item)" v-for="item in days" :key="item.day" :class="item.active ? 'active' : ''" :style="{'background-color': item.choose ? date ? getTheme.background : getTheme.background_o : '','color': item.choose ? date ? '#fff' : getTheme.color : '','border-color': item.choose ? getTheme.border : 'transparent'}">
                    {{item.day}}
                </view>
            </view>
            <view class="bottom main-center cross-center" v-if="date">
                <view @click="goback" :style="{'background': getTheme.background_gradient_btn}">我知道了</view>
            </view>
        </view>
    </app-layout>
</template>

<script>
    import { mapState,mapGetters } from "vuex";

    export default {
        data() {
            return {
                days: [],
                date: '',
                choosed: false,
            }
        },
        computed: {
            ...mapState({
                userInfo: state => state.user.info,
            }),
            ...mapGetters('mallConfig', {
                getTheme: 'getTheme',
            }),
        },
        methods: {
            choose(item) {
                if(this.choosed || !item.active || this.date) {
                    return false;
                }
                this.choosed = true;
                item.choose = true;
                this.$storage.setStorageSync('week_time', item.week);
                setTimeout(function() {
                    uni.navigateBack();
                }, 500)
            },
            goback() {
                uni.navigateBack();
            }
        },

        onLoad(option) { this.$commonLoad.onload(option);
            let that = this;
            let list = JSON.parse(option.list);
            this.date = option.date;
            if(this.date) {
                for(let i = 1;i < 32;i++) {
                    let para = {
                        day: i,
                        active: true,
                        choose: false
                    }
                    for(let item of list) {
                        if(item == i) {
                            para.choose = true;
                        }
                    }
                    this.days.push(para);
                }
            }else {
                for(let i = 1;i < 32;i++) {
                    let para = {
                        day: i,
                        active: false,
                        choose: false
                    }
                    for(let item of list) {
                        if(item.week_key == i) {
                            para.active = true
                            para.week = item
                        }
                    }
                    this.days.push(para);
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .page {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
    }
    .title {
        height: 80rpx;
        line-height: 80rpx;
        border-bottom: 1rpx solid rgba(0,0,0,.1);
        padding: 0 24rpx;
        color: #666666;
        font-size: 28rpx;
        >image {
            display: block;
            width: 22rpx;
            height: 22rpx;
            margin-left: 40rpx;
            margin-right: 10rpx;
        }
        .week-last {
            font-size: 24rpx;
            color: #FF812D;
        }
    }
    .days {
        padding: 15rpx 4rpx;
        view {
            width: 66rpx;
            height: 66rpx;
            border-radius: 50%;
            text-align: center;
            line-height: 66rpx;
            font-size: 30rpx;
            color: #CCCCCC;
            border: 2rpx solid;
            margin: 15rpx 20rpx;
        }
        &.show-date {
            .active {
                background-color: #fff;
            }
        }
        .active {
            background-color: #F6F6F6;
            color: #333333;
        }
    }
    .bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 112rpx;
        border-top: 1rpx solid rgba(0,0,0,.1);
        color: #fff;
        view {
            border-radius: 34rpx;
            width: 702rpx;
            height: 68rpx;
            text-align: center;
            line-height: 68rpx;
            font-size: 28rpx;
            font-weight: 600;
        }
    }
</style>